<template>
    <div class="fillcontain">
        <div>
            <el-form :inline="true">
                 <el-form-item class="btnRight">
                    <el-button type="primary" size ="small" icon="view" @click='onAddMate()'>添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table_container">
            <el-table                
                :data='tableData'
                max-height="450"
                border
                :default-sort = "{prop: 'date', order: 'descending'}"
                style="width: 100%">
                 <el-table-column
                    :formatter="indexFormatter"
                    label="序号"
                    align='center'
                    width="70">
                </el-table-column>
                <el-table-column
                    prop="number"
                    label="学号"
                    align='center'
                    width="200">
                    <template slot-scope="scope">  
                        <span style="color:#00d053">{{ scope.row.number }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="item"
                    label="事项"
                    align='center'
                    width="150">
                    <template slot-scope="scope">  
                        <span style="color:#00d053"> {{ scope.row.item }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="grade"
                    label="分数"
                    align='center'
                    width="180">
                    <template slot-scope="scope">  
                        <span style="color:#00d053"> +  {{ scope.row.grade }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="prove"
                    label="证明"
                    align='center'
                    width="170"> 
                    <template slot-scope="scope">  
                        <span style="color:#00d053">{{ scope.row.prove }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="module"
                    label="模型"
                    align='center'
                    width="170">
                    <template slot-scope="scope">  
                        <span style="color:#f56767">{{ scope.row.module }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="order"
                    label="次序"
                    align='center'
                    width="170">
                    <template slot-scope="scope">  
                        <span style="color:#4db3ff">{{ scope.row.order }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="operation"
                    align='center'
                    label="操作"
                    fixed="right"
                    width="180">
                    <template slot-scope='scope'>
                        <el-button 
                            type="warning" 
                            icon='edit' 
                            size="small"
                            @click='onEditMate(scope.row)'
                        >编辑</el-button>
                        <el-button 
                            type="danger" 
                            icon='delete' 
                            size="small"
                            @click='onDeleteMate(scope.row,scope.$index)'
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
             <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination
                            v-if='pagination.total > 0'
                            :page-sizes="pagination.page_sizes"
                            :page-size="pagination.page_size"
                            :layout="pagination.layout"
                            :total="pagination.total"
                            :current-page.sync='pagination.page_index'
                            @current-change='handleCurrentChange'
                            @size-change='handleSizeChange'>
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 弹框页面 -->
        <DialogMate :dialog='dialog' :form='form' @update="getProfile"></DialogMate>
    </div>
</template>

<script>
import DialogMate from "../components/DialogMate.vue";

export default {
  name: "setmate",
  data() {
    return {
      tableData: [],
      allTableData: [],
      filterTableData: [],
      dialog: {
        show: false,
        title: "",
        option: "edit"
      },
      form: {
        number: "",
        item: "",
        grade: "",
        prove: "",
        module: "",
        order: "",
        id: ""
      },
      //需要给分页组件传的信息
      pagination: {
        page_index: 1, // 当前位于哪页
        total: 0, // 总数
        page_size: 5, // 1页显示多少条
        page_sizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
      },
    };
  },
  components: {
    DialogMate
  },
  created() {
    this.getProfile();
  },
  computed:{
    user() {
      return this.$store.getters.user;
    }
  },
  methods: {
    getProfile() {
      // 获取表格数据
      const url =this.$store.getters.user.number;
      this.$axios(`/api/profiles/mate/${url}`).then(res => {        
        //赋值给allTableData,用于分页时过滤数据
        this.allTableData = res.data;
        // 设置分页数据
        this.setPagination();
      });
    }, 
    onAddMate() {
        // console.log("添加");
        this.dialog = {
        show: true,
        title: "添加事项",
        option: "addmate"
      };
      this.form = {
        number:this.user.number,
        item: "",
        grade: "",
        prove: "",
        module: "",
        order: "",
        id: ""
      };
    },
    onEditMate(row) {
      // 编辑
      this.dialog = {
        show: true,
        title: "修改事项信息",
        option: "editmate"
      };
      this.form = {
        number: row.number,
        item: row.item,
        grade: row.grade,
        prove: row.prove,
        module: row.module,
        order: row.order,
        id: row._id
      };
    },
    onDeleteMate(row, index) {
      // 根据id删除该行数据
      this.$confirm("此操作将永久删除该行数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.deleteMate(row);
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },  
    async deleteMate(row, index) {      
      //删除图片delete api/profiles/deleteUpload/:fileName  
      const deleteImage = await this.$axios.delete(
        `/api/profiles/deleteUpload/${row.prove}`
      );
      // 删除
      const deleteMate = await this.$axios.delete(`/api/profiles/deletemate/${row._id}`);
      // console.log(deleteImage, deleteMate);
      this.$message({
        message: "删除成功",
        type: "success"
      });
      // 刷新页面
      this.getProfile();
      //返回一个Promise对象deleteMate
      return deleteMate;
    },
    //实现分页功能
    setPagination() {
            //初始化分页
            this.pagination.total = this.allTableData.length
            this.pagination.currentPage = 1
            this.pagination.pageSize = 5
            //设置分页数据
            this.tableData = this.allTableData.filter((item, index) => {
                return index < this.pagination.pageSize
            })
    },
    //改变每页条数
    handleSizeChange(size) {
            this.pagination.currentPage = 1
            this.pagination.pageSize = size
            this.tableData = this.allTableData.filter((item, index) => {
                return index < this.pagination.pageSize                
            })
    },
    //改变当前页
    handleCurrentChange(currentPage) {
            this.pagination.currentPage = currentPage
            this.tableData = this.allTableData.filter((item, index) => {
                return (index >= (currentPage - 1) * this.pagination.pageSize) && (index < currentPage * this.pagination.pageSize)
            })

    },
    // 序号在分页后延续原序号
    indexFormatter(row,column,cellValue,index) {        
        return index + 1 + (this.pagination.currentPage - 1) * this.pagination.pageSize;

    },
  }
};
</script>
<style scoped>
.fillcontain {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.btnRight {
  float: right;
}
.pagination {
  text-align: right;
  margin-top: 10px;
}
</style>